<template>
  <div id="container" class="box">
    <div id="cesiumContainer">
      <div class="modelMenu">
        <div
          v-for="(item, index) in modelList"
          :key="index"
          class="modelItem"
          @click="changeModels(item)"
        >
          {{ item.title }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "models",
  data() {
    return {
      url: "http://app.zhizhenvr.com/cesium/models-glb/CesiumAir/Cesium_Air.glb",
      modelList: [
        {
          title: "CesiumAir",
          url: "http://app.zhizhenvr.com/cesium/models-glb/CesiumAir/Cesium_Air.glb",
        },
        {
          title: "CesiumBalloon",
          url: "http://app.zhizhenvr.com/cesium/models-glb/CesiumBalloon/CesiumBalloon.glb",
        },
        {
          title: "CesiumMan",
          url: "http://app.zhizhenvr.com/cesium/models-glb/CesiumMan/Cesium_Man.glb",
        },
        {
          title: "CesiumMilkTruck",
          url: "http://app.zhizhenvr.com/cesium/models-glb/CesiumMilkTruck/CesiumMilkTruck.glb",
        },
        {
          title: "GroundVehicle",
          url: "http://app.zhizhenvr.com/cesium/models-glb/GroundVehicle/GroundVehicle.glb",
        },
        {
          title: "Pawns",
          url: "http://app.zhizhenvr.com/cesium/models-glb/Pawns/Pawns.glb",
        },
        {
          title: "ShadowTester",
          url: "http://app.zhizhenvr.com/cesium/models-glb/ShadowTester/Shadow_Tester.glb",
        },
        {
          title: "WoodTower",
          url: "http://app.zhizhenvr.com/cesium/models-glb/WoodTower/Wood_Tower.glb",
        },
      ],
      Cesium: "",
      viewer: ""
    }
  },
  mounted() {
    this.Cesium = this.cesium
    this.viewer = new this.Cesium.Viewer("cesiumContainer", {
      infoBox: false,
      selectionIndicator: false,
      shadows: true,
      shouldAnimate: true,
      vrButton: true, // 默认false 是否显示VR按钮
    }) 
    this.init()
  },
  methods: {
    changeModels(item) {
      this.url = item.url
      this.init()
    },
    init() {
      let Cesium = this.Cesium
      Cesium.Ion.defaultAccessToken = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIzYzI1NzcwNS1jZDQ0LTQzZjMtOTIyZC0xMDgzNWNmODVhYmUiLCJpZCI6ODYxODQsImlhdCI6MTY0NzU2OTU5N30.oNBhNr4HdFDhGrxYbHX0qdxVpFLIhlVtXmsW6oSr9Y4"
      var viewer = this.viewer
      // 地图源换成高德
      // viewer.imageryLayers.addImageryProvider(
      //   new Cesium.UrlTemplateImageryProvider({
      //     url: "https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}"
      //   })
      // )

      var providerViewModels = []

      let gaodev = new Cesium.UrlTemplateImageryProvider({
        url: "http://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}",
        subdomains: ["1", "2", "3", "4"]
      })
      var gaodeMapModel = new Cesium.ProviderViewModel({
        name: "高德矢量",
        iconUrl: Cesium.buildModuleUrl(
          "Widgets/Images/ImageryProviders/openStreetMap.png"
        ),
        tooltip: "高德矢量 地图服务",
        creationFunction: function() {
          return gaodev
        }
      })
      providerViewModels.push(gaodeMapModel)

      let gaode = new Cesium.UrlTemplateImageryProvider({
        url: "https://webst0{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}",
        subdomains: ["1", "2", "3", "4"]
      })
      let gaodeLabel = new Cesium.UrlTemplateImageryProvider({
        url: "http://webst0{s}.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}",
        subdomains: ["1", "2", "3", "4"]
      })
      var gaodeMapModel = new Cesium.ProviderViewModel({
        name: "高德影像",
        iconUrl: Cesium.buildModuleUrl(
          "Widgets/Images/ImageryProviders/mapboxSatellite.png"
        ),
        tooltip: "高德影像 地图服务",
        creationFunction: function() {
          return [gaode, gaodeLabel]
        }
      })
      providerViewModels.push(gaodeMapModel)

      let tencent = new Cesium.UrlTemplateImageryProvider({
        url: "https://p2.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=229",
        customTags: {
          sx: function(imageryProvider, x, y, level) {
            return x >> 4
          },
          sy: function(imageryProvider, x, y, level) {
            return ((1 << level) - y) >> 4
          }
        }
      })
      let tencentLabel = new Cesium.UrlTemplateImageryProvider({
        url: "https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=2&version=297"
      })
      var gaodeMapModel = new Cesium.ProviderViewModel({
        name: "腾讯影像",
        iconUrl: Cesium.buildModuleUrl(
          "Widgets/Images/ImageryProviders/mapboxSatellite.png"
        ),
        tooltip: "腾讯影像 地图服务",
        creationFunction: function() {
          return [tencent, tencentLabel]
        }
      })
      providerViewModels.push(gaodeMapModel)

      viewer.baseLayerPicker.viewModel.imageryProviderViewModels = providerViewModels
      // 设置默认地图源
      viewer.baseLayerPicker.viewModel.selectedImagery = viewer.baseLayerPicker.viewModel.imageryProviderViewModels[0]

      this.createModel(this.url, 5000.0, viewer, Cesium)

      viewer._cesiumWidget._creditContainer.style.display = "none" // 隐藏版权
    },
    createModel(url, height, viewer, Cesium) {
      viewer.entities.removeAll()
      var position = Cesium.Cartesian3.fromDegrees(113.549608, 34.813093, height)
      var heading = Cesium.Math.toRadians(135)
      var pitch = 0
      var roll = 0
      var hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll)
      var orientation = Cesium.Transforms.headingPitchRollQuaternion(
        position,
        hpr
      )
      var entity = viewer.entities.add({
        name: url,
        position: position,
        orientation: orientation,
        model: {
          uri: url,
          minimumPixelSize: 128,
          maximumScale: 20000
        }
      })
      viewer.trackedEntity = entity
    }
  }
}
</script>

<style lang='scss' scoped>
html, body, #cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
}

.modelMenu {
  position: absolute;
  left: 20px;
  top: 20px;
  width: 100px;
  text-align: center;
  height: 500px;
  z-index: 99;
  color: aqua;
  font-weight: bold;
  font-size: 18px;
  line-height: 40px;
  text-align: center;
}

.modelItem {
  cursor: pointer;
}
</style>
